<script setup>
import { ref } from 'vue'
import CustomNavbar from './compoents/CustomNavbar.vue'
import CategoryPanel from './compoents/CategoryPanel.vue'
import IndexsKeleton from './compoents/IndexsKeleton.vue'
import HotPanel from './compoents/HotPanel.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getSwiperList } from '@/api/home.js'
import { getHotList } from '@/api/home.js'
import { getCategoryList } from '@/api/home'

import { useUserStore } from '@/stores/index.js'
const userStore = useUserStore()

const isloading = ref(false) // 数据是否加载中
const istriggered = ref() // 下拉刷新状态

const swiperList = ref([]) // 轮播图数据列表，从接口获取
const hotList = ref([])
const categoryList = ref([])

const GuessRef = ref()

// 获取轮播图数据的方法
const getSwiperListFn = async () => {
  swiperList.value = (await getSwiperList(1)).data.result
}

// 获取分类面板数据的方法
const getCategoryListFn = async () => {
  categoryList.value = (await getCategoryList()).data.result
}

// 获取热门推荐数据的方法
const getHotListFn = async () => {
  hotList.value = (await getHotList()).data.result
}

// 页面加载时调用获取数据的方法

onLoad(async () => {
  userStore.getUserInfo()
  isloading.value = true
  await Promise.all([getSwiperListFn(), getCategoryListFn(), getHotListFn()])
  isloading.value = false // 数据加载完成，显示页面内容
})
// 监听滚动触底事件
const onScrolltolower = () => {
  GuessRef.value.getData()
}
// 监听上拉刷新事件
const onRefresherrefresh = async () => {
  istriggered.value = true
  await GuessRef.value.refresherData()
  istriggered.value = false
}
</script>

<template>
  <view class="hone-container">
    <!-- 自定义导航栏 -->
    <CustomNavbar class="Navbar" />
    <scroll-view
      scroll-y
      class="scroll-view"
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="istriggered"
      @scrolltolower="onScrolltolower"
      refresher-enabled
      v-if="!isloading"
    >
      <!-- 自定义轮播图通用组件 -->
      <ShopSwiper :swiperList="swiperList"></ShopSwiper>
      <!-- 分类面板 -->
      <CategoryPanel :categoryList="categoryList"></CategoryPanel>
      <!-- 热门推荐 -->
      <HotPanel :hotList="hotList"></HotPanel>
      <!-- 猜你喜欢 -->
      <ShopGuess ref="GuessRef"></ShopGuess>
    </scroll-view>
    <IndexsKeleton v-else></IndexsKeleton>
  </view>
</template>

<style lang="scss" scoped>
.hone-container {
  display: flex;
  flex-direction: column;
  height: 100%; // 设置高度为视口高度
  background-color: #f7f7f7;
}
.scroll-view {
  height: 80vh;
}
</style>
